<template>
  <div id="microPage">
    <el-button type="primary" @click="onCreate">Create</el-button>

    <p class="sub-title">page list</p>
    <div class="page-list" v-for="(item, index) in microPageList" :key="index">
      <span>ID: {{ item.id }}</span>
      <el-button type="primary" @click="onEdit(item.id)">Edit</el-button>
      <el-button type="primary" @click="onCheck(item.id)">Check</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "microPage",
  components: {},
  computed: {},
  data() {
    return {
      microPageList: [],
    };
  },
  created() {},
  mounted() {
    let arr = localStorage.getItem("myPage");
    if (arr !== null) {
      try {
        this.microPageList = JSON.parse(arr);
      } catch (error) {
        localStorage.clear();
        console.error("JSON解析失败!");
      }
    }
  },
  methods: {
    /**
     * 创建一个微网页
     */
    onCreate() {
      this.$router.push({
        name: "micropageCreate",
      });
    },
    /**
     * 编辑一个微网页
     */
    onEdit(id) {
      this.$router.push({
        name: "micropageCreate",
        query: {
          id,
        },
      });
    },
    /**
     * 查看
     */
    onCheck(id) {
      this.$router.push({
        name: "micropageCheck",
        query: {
          id,
        },
      });
    },
  },
  destroyed() {},
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/style.scss";
#microPage {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .sub-title {
    margin: 60px 0 20px;
    font-size: 22px;
  }
  .page-list {
    span {
      margin-right: 20px;
    }
  }
}
</style>
